<template>
    <view class="narv-search">
		<view class="search-content">
			<view class="stauts-box">		
			</view>
			<view class="top-content">
				<view class="left-content" @click.stop="narvBack" v-if="isShow">
					<uni-icons type="left" size="30" :color="titleColor"></uni-icons>

				</view>
				<view class="center-content">
					{{titleText}}
				</view>
				<view class="right-content">
					
				</view>
			</view>
			
		</view>
	</view>
	<view class="box-place">
		
	</view>

</template>

<script setup>
import { COLOR_THEME_PRIMARY } from '@/utils/config';
import {useNarvcontent}from '@/utils/narvData.js'
import { computed } from 'vue';
const {statusNarH,capsuleTitleH,topContentH}=useNarvcontent.value
console.log(statusNarH.value,topContentH.value,capsuleTitleH.value);
const {titleText,titleColor,}=defineProps(['titleText','titleColor'])
//获得页面栈信息
const isShow=computed(()=>getCurrentPages.length>0)
const isALign=computed(()=>isShow.value?'center':'left')
function narvBack(){
	uni.navigateBack({
		fail:()=>{
			uni.reLaunch({
				url:'/pages/index/index'
			})
		}
	})
}
</script>

<style lang="scss" scoped>
	/* 使用v-bind可以绑定js文件中定义的样式对应的常量/变量 */
	.narv-search{
		z-index: 999;
		background-color: #ffd5fd;
		width: 750rpx;
		left:0;
		right:0;
		top:0;
		
		position: fixed;
		.search-content{
			width: 100%;
			.stauts-box{
				height: v-bind(statusNarH);
			}
			.top-content{
				background-color: #ffd5fd;
				width: 100%;
				height: v-bind(capsuleTitleH);
				display: flex;
				text-align: center;
				justify-content: space-between;
				align-items: center;
				padding: 0 32rpx;
				font-size: 32rpx;
				.left-content{
					width: 80rpx;
					height: 100%;
					display: flex;
					flex-shrink: 0;
					align-items: center;
					
				
				}
					
				.center-content{
					flex: 1;
					text-align: v-bind(isALign);
					color: rgba(255, 255, 255, 1);
					font-size: 44rpx;
					font-weight: 700;
				}
					
				.right-content{
					width: 80rpx;
					height: 100%;
					flex-shrink: 0;
				}
				
			}
		}
		
	}
	.box-place{
		width: 100%;
		height: v-bind(topContentH);
	}
</style>